<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{commons/common::head('详情')}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <link rel="stylesheet" th:href="@{/css/common.css}" href="../static/css/common.css">
        <title>详情</title>
    </head>
    <body>
        <!-- 顶部 -->
        <div th:replace="~{commons/common::navbar(2)}" class="header bg-white mb-3 shadow-sm"></div>

        <div class="main">
            <div class="container">
                <div class="row-cols-1">
                    <img src="#" th:src="@{${siteScenic.siteImg}}" width="1200px" height="600px"/>
                </div>
                <div class="row-cols-1 mt-3">
                    <h1 class="text-center text-primary" th:text="${siteScenic.siteName}"></h1>
                </div>
                <div class="row-cols-1 mt-3">
                    <p class="text-muted" style="font-size: 18px; line-height: 200%; text-indent: 2em"
                       th:text="${siteScenic.siteInfo}"></p>
                </div>
                <h3 class="text-center text-primary">景点门票</h3>
                <div class="row-cols-1 mt-3">
                    <div class="list-group">
                        <div class="list-group-item list-group-item-action p-4">
                            <div class="row">
                                <div>
                                    <img th:src="@{${siteScenic.siteImg}}" src="../static/img/im_bg.jpg" width="200px">
                                </div>
                                <div class="col ml-5">
                                    <h5 th:text="${siteScenic.siteName}">华山</h5>
                                    <span class="text-muted"
                                          th:text="${#strings.abbreviate(siteScenic.siteInfo, 150)}"></span>
                                    <div class="float-right text-warning mt-2 mr-2" style="font-size: 25px">
                                        <i class="fas fa-money-bill"></i> 价格: ￥<span
                                            th:text="${siteTicket.ticketPrice}">500</span>
                                        <button th:if="${session.USER != null}" id="buyTicketBtn"
                                                class="btn btn-primary ml-3"
                                                data-toggle='modal' data-target='#add-order-modal'>
                                            购票
                                        </button>
                                        <a th:href="@{/user/login}" th:if="${session.USER == null}"
                                           class="btn-link ml-3">
                                            提示: 请先登录后购票!
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <footer th:replace="~{commons/common::footer}" class="navbar-fixed-bottom mt-5 text-muted small"></footer>

        <!-- 添加订单模态框 -->
        <div th:if="${session.USER != null}" th:object="${session.USER}"
             id='add-order-modal' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='my-modal-label'>
            <div class='modal-dialog modal-lg' role='document' aria-hidden='true'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h3 id='my-modal-label' class='modal-title text-primary'>购票</h3>
                    </div>
                    <div class='modal-body'>
                        <h3 class="text-center text-warning">票价:￥<span th:text="${siteTicket.ticketPrice}"></span></h3>
                        <div class="form-group row">
                            <label for="userRealName" class="col-form-label col-sm-2">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userRealName" name="userRealName"
                                       placeholder="请输入真实姓名" th:value="*{userRealName}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="orderCount" class="col-form-label col-sm-2">购票数量</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="orderCount" name="orderCount" max="10"
                                       min="1" value="1">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userIdCard" class="col-form-label col-sm-2">身份证号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userIdCard" name="userIdCard"
                                       placeholder="请输入身份证号" th:value="*{userIdCard}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userPhone" class="col-form-label col-sm-2">手机号</label>
                            <div class="col-sm-10">
                                <input type="tel" class="form-control" id="userPhone" name="userPhone"
                                       placeholder="请输入手机号码" th:value="*{userPhone}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="orderUseTime" class="col-form-label col-sm-2">出发日期</label>
                            <div class="col-sm-10">
                                <input type="datetime-local" class="form-control" id="orderUseTime" name="orderUseTime">
                            </div>
                        </div>
                    </div>
                    <div class='modal-footer'>
                        <button id="cancelModelBtn" type='button' class='btn btn-danger' data-dismiss='modal'>取消
                        </button>
                        <button id='add-order-btn' type='button' class='btn btn-primary' onclick="addOrder()">
                            提交订单
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <th:block th:replace="~{commons/common::commonJs}"/>
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/js/bootstrapQ.js}" src='../static/js/bootstrapQ.js'></script>
        <script th:inline="javascript">
            // 订单提交
            function addOrder() {
                let req = {};
                req.userRealName = $('#userRealName').val().trim();
                req.userIdCard = $('#userIdCard').val().trim();
                req.userPhone = $('#userPhone').val().trim();
                req.ticketId = /*[[${siteTicket.ticketId}]]*/'';
                req.orderCount = $('#orderCount').val().trim();
                req.orderUseTime = $('#orderUseTime').val().trim();

                if (req.orderUseTime === '') {
                    bootstrapQ.msg({msg: '请输入出行时间', type: 'warning', time: 3000});
                    return;
                }

                $.ajax({
                    url: /*[[@{/order/addOrder.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: (response) => {
                        if (response.success) {
                            bootstrapQ.confirm({msg: response.message + '，立即支付?'},
                                // 订单支付
                                function () {
                                    let buyReq = {};
                                    buyReq.orderId = response.data.orderId;
                                    $.ajax({
                                        url: /*[[@{/order/buyOrder.do}]]*/'',
                                        method: 'POST',
                                        dataType: 'json',
                                        data: JSON.stringify(buyReq),
                                        contentType: 'application/json;charset=utf-8',
                                        processData: false,
                                        success: (resp) => {
                                            if (resp.success) {
                                                $('#add-order-modal').modal('hide');
                                                location.href = /*[[@{/order/list}]]*/'';
                                            } else {
                                                bootstrapQ.msg({msg: resp.message, type: 'danger', time: 3000});
                                            }
                                        },
                                        error: (error) => {
                                            bootstrapQ.msg({msg: '网络异常 => ' + error, type: 'danger', time: 3000});
                                        }
                                    })
                                },
                                // 取消支付
                                function () {
                                    $('#add-order-modal').modal('hide');
                                    location.href = /*[[@{/order/list}]]*/'';
                                }
                            );
                        } else {
                            bootstrapQ.msg({msg: response.message, type: 'warning', time: 3000});
                        }
                    },
                    error: (error) => {
                        bootstrapQ.msg({msg: '网络异常 => ' + error, type: 'danger', time: 3000});
                    }
                });
            }
        </script>
    </body>
</html>